<template>
	<div>
		<!-- <div style="z-index: 2;display: flex;justify-content: flex-start;
		background-color: rgb(243, 244, 246);
		height:11%;
		position: fixed;top: 0;left: 0;width: 100%;
		border-bottom:0.5px solid #c3b2bb;align-items: center;">
			<div style="font-size: 20px;margin-left: 0px;height: 11vh;
		text-align: center;width: 100px;line-height: 11vh;">Aria
			</div>
			<form
				style="display: flex;align-items: center;margin-left: 150px;height: 11vh;display: flex;justify-content: flex-start;">
				<div class="inputBox">
					<input id="inputtop" type="text" placeholder="">
				</div>
				<span style="width: 10px;"></span>
				<div class="inputBox">
					<input type="submit" value="检索">
				</div>
			</form>
			<span style="width: 20%;"></span>
			<div style="height: 11vh;align-items: center;line-height: 11vh;">{{ this.$store.state.borderflag }}</div>
			<span style="width: 5%;"></span>
			<div style="line-height: 11vh;" v-if="this.$store.state.isLogin===true">欢迎，{{this.$store.state.username}}</div>
			<el-dropdown @command="handleCommand">
				<span class="el-dropdown-link">
					<i class="el-icon-arrow-down el-icon--right" style="color: #000000;"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="a">个人中心</el-dropdown-item>
					<el-dropdown-item command="b">门户系统</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<span style="width: 30px;"></span>
			<div style="line-height: 11vh;" v-if="this.$store.state.isLogin===true">欢迎，{{this.$store.state.username}}</div>
			<button class="logout" style="height: 40px;position: absolute;right:30px;" v-if="this.$store.state.isLogin===false" @click="gotoLogin">登录</button>
			<button class="logout" style="height: 40px;position: absolute;right:30px;" v-if="this.$store.state.isLogin===true" @click="outLogin">退出登录</button>
		</div> -->
		<div style="height: 100vh; width: 100%;" class="bb" id="bbb">
			<div class="aa">
				<div style="width: 65%">&nbsp;</div>
				<ul>
					<li v-if="this.$store.state.isLogin === true">
						欢迎，{{ this.$store.state.username }}
					</li>
					<li v-if="this.$store.state.isLogin === false"></li>
					<li v-if="this.$store.state.isLogin === true" @click="outLogin()">
						退出登录
					</li>
					<li v-if="this.$store.state.isLogin === false" @click="gotoLogin()">
						<i class="el-icon-user-solid"></i>&nbsp;&nbsp;&nbsp;&nbsp;登录
					</li>
					<li v-show="this.$store.state.ifyanzheng === false" @click="changedraw"><i
							class="el-icon-key"></i>&nbsp;&nbsp;&nbsp;&nbsp;认证</li>
					<li v-show="this.$store.state.ifyanzheng === true"><i
							class="el-icon-key"></i>&nbsp;&nbsp;&nbsp;&nbsp;已认证</el-button>
					</li>
				</ul>
				<el-drawer title="身份认证" :visible.sync="this.$store.state.drawer" :direction="direction" :before-close="handleClose" :size="size">
					<ren-zheng></ren-zheng>
				</el-drawer>
			</div>
			<div>
				<div style="float: left; margin-left: 5%; margin-top: 5%">
					<div class="jump">
						<span v-show="this.$store.state.ifyanzheng === false" @click="changedraw">学者认证</span>
						<span v-show="this.$store.state.ifyanzheng === true">已认证</span>
					</div>
					<div class="jump">
						<span @click="changePageToSch">门户系统</span>
					</div>
					<div class="jump">
						<span @click="changepagetoperson" >个人空间</span>
					</div>
					<div class="jump">
						<span @click="changepagetoperson_collection" >我的收藏</span>
					</div>
				</div>
				<div style="float: right; margin-top: 10%; margin-right: 5%">
					<div class="jump">
						<span>热点论文</span>
					</div>
					<div class="jump">
						<span>热点关键词</span>
					</div>
				</div>
			</div>
			<div class="slogan">ARIA</div>
			<div class="form">
				<input type="text" name="uname" placeholder="Search here..." v-model="search_com" />
				<button @click="searchCom()">
					SEARCH
				</button>
			</div>
			<div class="down" @click="godownToNext()">
				<i style="display: block;" class="el-icon-arrow-down"></i>
				<i style="display: block;" class="el-icon-arrow-down"></i>
			</div>
		</div>
		<div style="width: 100%;margin-top: 5%;position: absolute;">    <!--第二个大div-->
			<div @click="goupToNext()" style="color: black;" class="up">
				<i style="display: block;" class="el-icon-arrow-up"></i>
				<i style="display: block;" class="el-icon-arrow-up"></i>
			</div>
			<div id="down1" style="margin-top:5%;width: 100%;display:flex;justify-content: center;"
				class="searchclass">
				<ul>
					<li><button class="green" @click="changeSearchFlag(0)">高级搜索</button></li>
					<li><button class="purple" @click="changeSearchFlag(1)">搜作者</button></li>
					<li><button class="green" @click="changeSearchFlag(2)">普通搜索</button></li>
				</ul>
			</div>
			<div style="width: 100%;display:flex;margin-left: 50%;margin-top:5%;transform: translate(-50%, -50%);;" v-if="searchflag!==0">
				<div class="form" v-if="searchflag===2">
					<input type="text" style="background-color: wheat;border: solid wheat 2px;" name="uname" placeholder="Search here..." v-model="search_text" />
					<button @click="searchCom()">
						SEARCH
					</button>
				</div>
				<div class="form" v-if="searchflag===1">
					<input type="text" style="background-color: wheat;border: solid wheat 2px;" name="uname" placeholder="Search authors here..." v-model="search_com" />
					<button @click="searchCom()">
						To &nbsp;&nbsp;<i class="el-icon-user"></i>
					</button>
				</div>
			</div>
			<div class="higherform" v-if="this.searchflag===0" style="margin-top:18%"> 
				<el-form ref="form" :model="form" label-width="100px" >
					<el-form-item label="检索词">
						<el-input v-model="form.allname" style="width: 80%;margin-left:20px" placeholder="包含所有"></el-input>
					</el-form-item>
					<el-form-item label="检索词">
						<el-input v-model="form.orname" style="width: 80%;margin-left:20px" placeholder="包含至少一个"></el-input>
					</el-form-item>
					<el-form-item label="检索词">
						<el-input v-model="form.noname" style="width: 80%;margin-left:20px" placeholder="不包含检索词"></el-input>
					</el-form-item>
					<el-form-item label="检索词位置">
						<el-radio-group v-model="form.pos" style="margin-left:20px;">
							<el-radio label="题目"></el-radio>
							<el-radio label="摘要"></el-radio>
						
						</el-radio-group>
					</el-form-item>
					<el-form-item label="作者">
						<el-input v-model="form.author" style="width: 80%;margin-left:20px"></el-input>
					</el-form-item>
					<!-- <el-form-item label="机构">
						<el-input v-model="form.publ" style="width: 50%;margin-left:20px"></el-input>
					</el-form-item> -->
					<el-form-item label="发表时间" style="margin-left:20px">
						<el-date-picker
						      v-model="form.time"
						      type="monthrange"
						      range-separator="至"
						      start-placeholder="开始月份"
						      end-placeholder="结束月份">
						    </el-date-picker>
					</el-form-item>
					
					<el-form-item label="分类">
						<el-radio-group v-model="form.class">
							<el-radio label="期刊"></el-radio>
							<el-radio label="图书"></el-radio>
							<el-radio label="学位论文"></el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="出版社">
						<el-input v-model="form.pub" style="width: 80%;margin-left:20px"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">立即检索</el-button>
					</el-form-item>
				</el-form>
			</div>
			
			<div style="display: flex;margin-top: 50px;">
				<div style="margin-left: 10%;width: 20%">
					<div
						style="font: 13px arial;list-style: none;font-family: Arial,sans-serif;text-align: left;line-height: 22px;font-weight: 700;font-size: 22px;float: left;">
						学术热点排序
					</div>
					<div
						style="left: 20px;font: 13px arial;list-style: none;font-family: Arial,sans-serif;text-align: left;line-height: 22px;font-size: 14px;float: right;color: #666;">
						热度
					</div>
					<br />
					<div v-for="(item, index) in hotpoint" style="margin-top: 10%">
						<div
							style="font: 13px arial;font-family: Arial,sans-serif;list-style: none;line-height: 21px;color: #00c;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: inline-block;">
							{{ index + 1 }} {{ item.name }}
							<img v-if="index < 2" src="../assets/hot2.png" width="15px" height="15px" />
						</div>
						<div
							style="left: 20px;font: 13px arial;list-style: none;font-family: Arial,sans-serif;text-align: left;line-height: 22px;font-size: 14px;float: right;color: #666;">
							{{ item.hot }}
						</div>
					</div>
				</div>
				<div style="margin-left: 7%;width: 50%;height: 320px">
					<div
						style="font: 13px arial;list-style: none;font-family: Arial,sans-serif;text-align: left;line-height: 22px;font-weight: 700;font-size: 22px;float: left;">
						高被引论文
					</div>
					<div v-for="(index, item) in classification">
						<div style="font: 13px arial;font-family: Arial,sans-serif;text-align: left;line-height: 22px;font-weight: 200;font-size: 15px;float: left;border-radius: 4px;margin-left: 10px;"
							:class="classObject" v-on:click="mouseOver" @mouseleave="mouseDown">
							{{ index }} {{ item.name }}
						</div>
					</div>
					<div
						style="left: 20px;font: 13px arial;list-style: none;font-family: Arial,sans-serif;text-align: left;line-height: 22px;font-size: 14px;float: right;color: #666;">
						引用量
					</div>
					<br />
					<div v-for="(item, index) in highcite" style="margin-top: 18px">
						<div
							style="font: 15px arial;font-family: Arial,sans-serif;list-style: none;line-height: 21px;color: #00c;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: inline-block;">
							{{ index + 1 }} {{ item.name }}
							<img v-if="index < 2" src="../assets/hot2.png" width="15px" height="15px" />
							<div style="font-size: 10px;color: #666666">
								{{ item.information }}
							</div>
						</div>
						<div
							style="left: 20px;font: 13px arial;list-style: none;font-family: Arial,sans-serif;text-align: left;line-height: 22px;font-size: 14px;float: right;color: #666;">
							{{ item.citenum }}
						</div>
					</div>
				</div>
				
			</div>
			
		</div>

		<!-- <div ref="pronbit" id="movebox" style="height: 100px;width: auto;border: solid;margin-top: 1000px;">afdasf</div> -->
	</div>
</template>

<script>
	import RenZheng from './renzheng.vue'
	export default {
		name: "Home",
		components: {
			RenZheng,
		},
		// mounted() {
		// 	window.addEventListener('scroll', this.handleScrollx, true)
		// },
		methods: {
			onSubmit() {
				var temptext=this.form.allname+this.form.allname+this.form.noname
				this.$store.state.highform=this.form
				this.$router.push("/high-search/" + temptext);
				this.form=[]
				
			},
			goupToNext(){
				
				
				window.scrollTo({
					top: 0,
					behavior: "smooth"
				});
			},
			changeSearchFlag(flag) {
				this.searchflag = flag;
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						this.$store.state.drawer=false
						done();
					})
					.catch(_ => {});
			},
			changedraw() {
				if (this.$store.state.isLogin === false) {
					this.$message('您尚未登录，请先登录')
				} else {
					this.$store.state.drawer = !this.$store.state.drawer
				}

			},
			changePageToSch() {
				if (this.$store.state.ifyanzheng === false) {
					this.$message('您非学者，请前往主页右上角认领学者')
				} else {
					this.$router.push("/scholarpage");
				}

			},
			handleScrollx() {
				// console.log('滚动高度',window.pageYOffset)
				// console.log('距离顶部高度',this.$refs.pronbit.getBoundingClientRect().top)
				var detah = this.$refs.pronbit.getBoundingClientRect().top;
				if (detah <= 300) {
					var ele = document.getElementById("movebox");
					ele.style.backgroundColor = "red";
				} else {
					var ele = document.getElementById("movebox");
					ele.style.backgroundColor = "green";
				}
			},
			searchCom() {
				this.$router.push("/search/" + this.search_com);
			},
			searchAuthor() {
				this.$router.push("/authorres/" + this.search_text);
			},
			testclick() {
				// var a = document.getElementById("searchBtn")
				// this.axios({
				// 	method: 'post',
				// 	url: '/searchtest/',
				// 	data: {
				// 		'keyword': a.value
				// 	},
				// 	headers: {
				// 		'X-CSRFToken': this.getCookie('csrftoken')
				// 	},
				// }).then(res => {
				// 	var obj = JSON.parse(res.data);
				// 	//[['文件名','作者名',...],[],[]]
				// 	for (let i = 0; i < obj.length - 1; i++) {
				// 		console.log(obj[i]);
				// 	}
				// })

				this.$router.push("/search/" + this.search_text);
			},
			getCookie(name) {
				var value = "; " + document.cookie;
				var parts = value.split("; " + name + "=");
				if (parts.length === 2)
					return parts
						.pop()
						.split(";")
						.shift();
			},
			handleCommand(command) {
				if (command === "a") {
					if (this.$store.useremail !== "") {
						const self = this;
						self
							.axios({
								method: "post",
								url: "/personalpage/personalmsg",
								headers: {
									"X-CSRFToken": this.getCookie("csrftoken"),
								},
								data: {
									email: this.$store.useremail,
								},
							})
							.then((res) => {
								var obj = res.data;
								this.$store.username = obj.username;
								this.$store.userphone = obj.userphone;
								//console.log(obj)
								this.$message({
									message: "成功获取用户信息",
									type: "success",
								});
								this.$router.push("/personalpage");
							});
					} else {
						this.$message({
							showClose: true,
							message: "请先登录！",
						});
					}
				} else if (command === "b") {
					this.$router.push("/scholarpage");
				}
			},
			mouseOver() {
				this.classObject.active1 = true;
				console.log("hello");
			},
			godownToNext() {
				var ele = document.getElementById("down1");
				var eleT = ele.scrollTop;
				var num = document.body.clientHeight;
				window.scrollTo({
					top: num,
					behavior: "smooth"
				});
			},
			mouseDown() {
				this.classObject.active1 = false;
			},
			changepagetoperson() {
				//console.log('heiheihi诶嘿IE')
				if(this.$store.state.isLogin === true){
          this.$router.push({
            path: "/personalpage",
          });
          localStorage.setItem("show_num", "1");
        }
        else{
          this.$message('您尚未登录，请先登录')
        }
			},
			changepagetoperson_collection() {
        if(this.$store.state.isLogin === true){
          this.$router.push({
            path: "/personalpage",
          });
          localStorage.setItem("show_num", "1");
        }
        else{
          this.$message('您尚未登录，请先登录')
        }
			},
			gotoLogin() {
				this.$router.push("/login");
			},
			outLogin() {
				this.$store.state.isLogin = false;
				this.$store.state.ifyanzheng = false;
				const self = this;
				this.isLogin = false;
				(this.$store.username = ""),
				(this.$store.useremail = ""),
				(this.$store.userphone = ""),
				self.axios({
					method: "post",
					url: "/outlogin/",
					data: {
						username: this.$store.state.username,
					},
					headers: {
						"X-CSRFToken": this.getCookie("csrftoken"),
					},
				});
				this.$store.state.username = "";
			},
		},
		data() {
			return {
				size: '90%',
				direction: 'rtl',
				searchflag: 2,
				search_text: "",
				search_com: '',
				classObject: {
					active1: false,
				},
				classification: [
					"教育",
					"经济",
					"法学",
					"哲学",
					"军事学",
					"文学",
					"历史学",
				],
				highcite: [{
						name: "疫情冲击下的中国形势",
						citenum: 123,
						information: "The Sociology of Race; Christian Scholar; 1960",
					},
					{
						name: "人工智能在电力系统中的应用",
						citenum: 456,
						information: "Karl A. Schleunes; Central European History; 1992",
					},
					{
						name: "人工智能在电力系统中的应用",
						citenum: 456,
						information: "Karl A. Schleunes; Central European History; 1992",
					},
					{
						name: "人工智能在电力系统中的应用",
						citenum: 456,
						information: "Karl A. Schleunes; Central European History; 1992",
					},
					{
						name: "人工智能在电力系统中的应用",
						citenum: 456,
						information: "吕云翔;2021",
					},
				],
				tiaozhuan: [{
						name: "学者认证",
					},
					{
						name: "学者主页",
					},
					{
						name: "个人空间",
					},
					{
						name: "我的收藏",
					},
				],
				hotpoint: [{
						name: "疫情冲击下的中国形势",
						hot: 123,
					},
					{
						name: "人工智能在电力系统中的应用",
						hot: 456,
					},
					{
						name: "人工智能在电力系统中的应用",
						hot: 456,
					},
					{
						name: "人工智能在电力系统中的应用",
						hot: 456,
					},
					{
						name: "人工智能在电力系统中的应用",
						hot: 456,
					},
					{
						name: "人工智能在电力系统中的应用",
						hot: 456,
					},
				],
				form: {
					allname: '',
					orname:'',
					noname:'',
					pos:'',
					author:'',
					time:'',
					class:'',
					pub:''
				}
			};
		},
	};
</script>
<style>
	body {
		margin: 0;
		padding: 0;
	}

	.down {
		margin-top: 18vh;
		margin-left: 50vw;
		/* margin-top: 25vh; */
		/* transform: translate(-50%, -50%); */
		color: #fff;
		width: 40px;
		height: 40px;
	}
	
	.up{
		margin-top: -5vw;
		margin-left: 50vw;
		/* margin-top: 25vh; */
		/* transform: translate(-50%, -50%); */
		width: 40px;
		height: 40px;
	}
	.up i{
		font-size: 20px;
		cursor: pointer;
	}
	
	.down i {
		font-size: 20px;
		cursor: pointer;
	}
		
	.higherform{
		margin-left: 55%;
		margin-top: 12%;
		transform: translate(-50%, -50%);
		/* border: solid; */
		width: 60%;
	}
	.aa {
		/* background-color: green; */
		/* opacity: 0.5; */
		height: 60px;
		width: 100%;
		/* top:0;
		position: fixed; */
		/* border: solid ; */
		color: #fff;
		background-color: rgba(255, 255, 255, 0.15);
		align-items: center;
		display: flex;
	}

	.bb {
		background: url(../assets/2.jpg) no-repeat;
		background-size: 100%;
	}

	.searchclass {
		margin-left: 49vw;
		margin-top: 0vh;
		transform: translate(-50%, -50%);
		/* border: solid; */

	}

	.searchclass ul {
		list-style: none;
	}

	.searchclass ul li {
		display: inline-block;
		cursor: pointer;
		color: #000;
	}

	.searchclass ul li:hover {}

	ul {
		list-style: none;
	}

	ul li {
		cursor: pointer;
		font-size: 1.5ch;
		display: inline-block;
		margin-left: 40px;
		margin-right: 40px;
		color: #eeeeee;
	}

	ul>li:hover {
		color: #ffffff;
	}

	.slogan {
		margin-left: 50vw;
		margin-top: 25vh;
		transform: translate(-50%, -50%);
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		width: 25vw;
		height: 25vh;
		border: solid #fff;
		letter-spacing: 10px;
		font-size: 8ch;
	}

	.form {
		margin-left: 50vw;
		/* margin-top: 25vh; */
		transform: translate(-50%, -50%);
		display: flex;
		width: 454px;
		height: 42px;
		/* background: rgba(0, 0, 0, 0.2); */
		padding: 15px;
		border: none;
		border-radius: 5px;
	}

	.form input {
		display: inline-block;
		width: 400px;
		height: 40px;
		background-color: transparent;
		border: solid #fff 2px;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
		font: bold 15px "lucida sans", "trebuchet MS", "Tahoma";
		font-style: italic;
		outline: none;
	}

	.form button {
		/*display:inline-block;*/
		display: inline-block;
		width: 112px;
		height: 44px;
		/* background-color: transparent; */
		background-color: rgb(72, 24, 245);
		color: #fff;
		/* border: solid #fff 2px; */
		border: none;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		position: relative;
		font-size: 16px;
		font-weight: bold;
		cursor: pointer;
	}

	/*添加三角符号*/
	.form button:before {
		content: "";
		border-width: 6px;
		border-style: solid;
		border-color: transparent rgb(72, 24, 245) transparent transparent;
		position: absolute;
		right: 100%;
		top: 38%;
	}

	.form input:hover {
		background-color: wheat;
	}

	.el-dropdown-link {
		cursor: pointer;
		color: #409eff;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}

	.active1 {
		background-color: #409eff;
	}

	.shade {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
	}

	.inputBox input[type="button"] {
		background: #fff;
		color: #666;
		width: 75px;

		/* margin-bottom: 20px; */
		font-weight: 600;
		cursor: pointer;
	}

	.scroll {
		margin: auto;
		overflow: auto;
	}

	.scroll::-webkit-scrollbar {
		width: 10px;

		height: 10px;
	}

	/*正常情况下滑块的样式*/

	.scroll::-webkit-scrollbar-thumb {
		background-color: rgba(0, 0, 0, 0.05);

		border-radius: 10px;

		-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
	}

	/*鼠标悬浮在该类指向的控件上时滑块的样式*/

	.scroll:hover::-webkit-scrollbar-thumb {
		background-color: rgba(0, 0, 0, 0.2);

		border-radius: 10px;

		-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
	}

	/*鼠标悬浮在滑块上时滑块的样式*/

	.scroll::-webkit-scrollbar-thumb:hover {
		background-color: rgba(0, 0, 0, 0.4);

		-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
	}

	/*正常时候的主干部分*/

	.scroll::-webkit-scrollbar-track {
		border-radius: 10px;

		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);

		background-color: white;
	}

	/*鼠标悬浮在滚动条上的主干部分*/

	.scroll::-webkit-scrollbar-track:hover {
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);

		background-color: rgba(0, 0, 0, 0.01);
	}

	#frozen-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}

	#down1 ul li button {
		border: 0;
		margin: 20px;
		text-transform: uppercase;
		font-size: 20px;
		font-weight: bold;
		padding: 15px 50px;
		border-radius: 50px;
		color: white;
		outline: none;
		position: relative;
		cursor: pointer;
	}

	#down1 ul li button:before {
		content: "";
		display: block;
		background: linear-gradient(to left,
				rgba(255, 255, 255, 0) 50%,
				rgba(255, 255, 255, 0.4) 50%);
		background-size: 210% 100%;
		background-position: right bottom;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		border-radius: 50px;
		transition: all 1s;
		-webkit-transition: all 1s;
	}

	.green {
		background-image: linear-gradient(to right, #25aae1, #40e495);
		box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
	}

	.purple {
		background-image: linear-gradient(to right, #6253e1, #852d91);
		box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
	}

	#down1 ul li .purple:hover:before {
		background-position: left bottom;
	}

	#down1 ul li .green:hover:before {
		background-position: left bottom;
	}

	.jump {
		/* background: transparent; */
		border: 0;
		border-radius: 0;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 20px;
		padding: 15px 50px;
		position: relative;
		cursor: pointer;
	}

	.jump:before {
		transition: all 0.5s cubic-bezier(0.7, -0.5, 0.1, 1);
		content: "";
		width: 1%;
		height: 100%;
		background: #00ffff;
		position: absolute;
		top: 0;
		left: 0;
	}

	.jump:hover:before {
		background: #00ffff;
		width: 100%;
	}

	.jump span {
		/* mix-blend-mode: darken; */
		color: #fff;
		background-color: #000;
	}

	.jump:hover span {
		mix-blend-mode: darken;
		color: #000;
		background-color: #fff;
	}

	.jump:nth-child(1):before {
		background: #7986ca;
	}

	.jump:nth-child(1):hover:before {
		background: #7986ca;
		width: 100%;
	}

	.jump:nth-child(2):before {
		background: #afd7f7;
	}

	.jump:nth-child(2):hover:before {
		background: #afd7f7;
		width: 100%;
	}

	.jump:nth-child(3):before {
		background: #c8b4e1;
	}

	.jump:nth-child(3):hover:before {
		background: #c8b4e1;
		width: 100%;
	}

	.jump:nth-child(4):before {
		background: #e6c9e1;
	}

	.jump:nth-child(4):hover:before {
		background: #e6c9e1;
		width: 100%;
	}
</style>
